<template>
  <div class="orderlist">
    <div class="orderTop"><el-button
      type="success"
      v-for="item in typelist"
      :key="item.id"
      :plain="status==item.id?false:true"
      @click="handtab(item.id)"
    >{{item.label}}</el-button></div>
    
    <el-table v-loading="loading" :data="orderlist" border style="width: 100%">
      <el-table-column prop="orderCode" label="订单号" width="180"></el-table-column>
      <el-table-column label="订单内容">
        <template slot-scope="scope">
          <img class="tickimg" :src="scope.row.orderItemOuts[0].goodsSkuPic" alt="img">
          <el-tag v-if="scope.row.flagType">{{scope.row.flagType | filterflagType}}</el-tag>
          <span>{{scope.row.orderItemOuts[0].goodsSkuName}}</span>
        </template>
      </el-table-column>
      <el-table-column prop="orderItemOuts[0].goodsNum" label="购买数量" width="100"></el-table-column>
      <el-table-column label="实付款（元）" width="120">
        <template slot-scope="scope">{{scope.row.realAmount | filterrealAmount}}</template>
      </el-table-column>
      <el-table-column label="当前状态" width="100">
        <template slot-scope="scope">{{scope.row.status | filterstatus}}</template>
      </el-table-column>
      <el-table-column label="支付方式" width="100">
        <template slot-scope="scope">{{scope.row.payType | filterpayType}}</template>
      </el-table-column>
      <el-table-column prop="createTime" label="下单时间" width="180"></el-table-column>
    </el-table>
    <span class="pagin">
      <el-pagination
        v-show="totalpage>10"
        layout="prev, pager, next"
        :total="totalpage"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </span>
  </div>
</template>
<script>
import { mapState, mapMutations } from "vuex";
export default {
  name: "orderlist",
  data() {
    return {
      page: 1,
      status: 0,
      totalpage: 0,
      loading:false,
      orderlist: [],
      typelist: [
        {
          label: "全部订单",
          id: "0"
        },
        {
          label: "待付款订单",
          id: "1"
        },
        {
          label: "已完成订单",
          id: "3"
        },
        {
          label: "已取消订单",
          id: "10"
        },
        {
          label: "退款订单",
          id: "4"
        }
      ]
    };
  },
  computed: {
    ...mapState(["token", "userId"])
  },
  filters: {
    filterflagType(val) {
      if (val == 4) {
        return "砍价";
      } else if (val == 5) {
        return "秒杀";
      } else if (val == 7) {
        return "拼团";
      } else if (val == 6) {
        return "抽奖";
      } else if (val == 1) {
        return "普通";
      }
    },
    filterrealAmount(val) {
      if (val) {
        let _val = "￥" + val.toFixed(2);
        return _val;
      } else {
        return "--";
      }
    },
    filterstatus(val) {
      if (val == 1) {
        return "待付款";
      } else if (val == 2) {
        return "待收货";
      } else if (val == 3) {
        return "已完成";
      } else if (val == 10) {
        return "已取消";
      } else if (val == 4) {
        return "退款申请中";
      } else if (val == 5) {
        return "已退款";
      }
    },
    filterpayType(val) {
      if (val == 0) {
        return "免费赠送";
      } else if (val == 2) {
        return "微信支付";
      } else if (val == 4) {
        return "余额支付";
      }
    }
  },
  methods: {
    //选择某种类别
    handtab(val) {
      this.status = val;
      this.page = 1;
      this.getorderlist();
    },
    //翻页
    handleCurrentChange(val) {
      this.page = val;
      this.getorderlist();
    },
    //获取订单列表数据
    getorderlist() {
      let _parms = {},
        _Url = "",
        _value = "",
        _this = this;
      _parms = {
        row: 10,
        page: this.page
      };
      if (this.status != 0) {
        _parms.status = this.status;
      }
      for (var key in _parms) {
        _value += key + "=" + _parms[key] + "&";
      }
      _value = _value.substring(0, _value.length - 1);
      _Url ="/api/website/orderInfo/list?" + _value;
      this.loading=true;
      this.$axios({
        url: _Url,
        method: "get",
        headers: {
          Authorization: this.token
        }
      }).then(res => {
        this.loading = false;
        if (res.data.code == 0) {
          _this.orderlist = res.data.data.list;
          this.totalpage = res.data.data.total;
        }
      });
    }
  },
  created() {
    this.getorderlist();
  }
};
</script>

<style lang="less">
.orderlist {
  .orderTop{
    margin-bottom: 10px;
  }
  .tickimg {
    height: 60px;
    width: 60px;
    border-radius: 8rpx;
  }
  .pagin {
    float: right;
  }
}
</style>




